<template>
  <div>
    <!-- 查看弹窗 -->
    <div class="s_shadow" v-if="showFlag">
      <div class="s_shadow_a">
        <h3 class="list1_title title_b">
          <img src="@/assets/images/shu_03.jpg" alt />
          <span class="title_text">建设单位人员实名制详情</span>
          <img class="closeshadow" @click="close1" src="@/assets/images/clear2.png" alt />
        </h3>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="rowData.Name" placeholder="请输入内容"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
      </div>
    </div>

    <!-- 修改弹窗 -->
    <div class="s_shadow" v-if="showFlag1">
      <div class="s_shadow_a">
        <h3 class="list1_title title_b">
          <img src="@/assets/images/shu_03.jpg" alt />
          <span class="title_text">施工人员实名制修改</span>
          <img class="closeshadow" @click="close1" src="@/assets/images/clear2.png" alt />
        </h3>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="rowData.Name" placeholder="请输入内容"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">姓名</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
      </div>
    </div>

    <!-- 列表页面 -->
    <h3 class="list1_title">
      <img src="@/assets/images/shu_03.jpg" alt />
      <span class="title_text">施工人员详情</span>
    </h3>
    <div class="find_a">
      <div class="findbtn">查询</div>
      <div class="name">
        <span>姓名:</span>
      </div>
      <div class="name_input">
        <el-input v-model="input" placeholder="请输入内容"></el-input>
      </div>
    </div>
    <div class="find_a">
      <div class="name">
        <span>姓名:</span>
      </div>
      <div class="name_input">
        <el-input v-model="input" placeholder="请输入内容"></el-input>
      </div>
    </div>
    <div class="find_a">
      <div class="name">
        <span>姓名:</span>
      </div>
      <div class="name_input">
        <el-input v-model="input" placeholder="请输入内容"></el-input>
      </div>
    </div>
    <div class="find_a">
      <div class="name">
        <span>姓名:</span>
      </div>
      <div class="name_input">
        <el-input v-model="input" placeholder="请输入内容"></el-input>
      </div>
    </div>
    <div class="table_content">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%;min-height:528px;text-algin:center"
        @row-click="rowinfo"
      >
        <el-table-column align="center" type="index" label="序号" width="90"></el-table-column>
        <el-table-column align="center" prop="Name" label="姓名" width="90"></el-table-column>
        <el-table-column align="center" prop="Sex" label="性别" width="90"></el-table-column>
        <el-table-column align="center" prop="Age" label="年龄" width="70"></el-table-column>
        <el-table-column align="center" prop="Card_Num" label="身份证号" width="180"></el-table-column>
        <el-table-column align="center" prop="Phone_Num" label="联系方式"></el-table-column>
        <el-table-column align="center" prop="Unit_Name" label="单位名称" width="180"></el-table-column>
        <!-- <el-table-column align="center" prop="Position_ID" label="职位ID" width="90"></el-table-column> -->
        <el-table-column align="center" prop="Emergency_Contact_Name" label="紧急联系人姓名"></el-table-column>
        <el-table-column align="center" prop="Emergency_Contact_Tel" label="紧急联系人电话"></el-table-column>
        <!-- <el-table-column align="center" prop="Relationship" label="与本人关系" width="90"></el-table-column> -->
        <el-table-column align="center" prop="User_ID" label="填报人" width="90"></el-table-column>
        <el-table-column align="center" prop="Create_Time" label="创建时间"></el-table-column>
        <el-table-column align="center" prop="Type" label="所属类别" width="90"></el-table-column>
        <el-table-column align="center" label="操作">
          <template>
            <img @click="showInfo" src="@/assets/images/fill-view.png" />
            <img @click="update" src="@/assets/images/edit.png" />
            <img src="@/assets/images/remove.png" />
          </template>
        </el-table-column>
      </el-table>
      <div class="fenye">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
@import "@/style/epidemicrisk/list1.scss";
</style>
<script>
export default {
  data() {
    return {
      // 查看弹窗显示隐藏
      showFlag: false,
      //修改弹窗
      showFlag1: false,

      rowData: {},
      //当前页
      currentPage: 1,
      tableData: [
        {
          Sex: "男",
          Name: "王小虎",
          Age: "15",
          Card_Num: "422801199412173612",
          Phone_Num: "13080664495",
          Unit_Name: "武汉大吉大利今晚吃鸡",
          Position_ID: "卑微前端",
          Emergency_Contact_Name: "他爹爹",
          Emergency_Contact_Tel: "13080664478",
          Relationship: "父子",
          User_ID: "她麻麻",
          Create_Time: "2020-2-6 17:01:41",
          Type: "开发"
        },
        {
          Sex: "男",
          Name: "王虎",
          Age: "15",
          Card_Num: "422801199412173612",
          Phone_Num: "13080664495",
          Unit_Name: "武汉大吉大利今晚吃鸡",
          Position_ID: "卑微前端",
          Emergency_Contact_Name: "他爹爹",
          Emergency_Contact_Tel: "13080664478",
          Relationship: "父子",
          User_ID: "她麻麻",
          Create_Time: "2020-2-6 17:01:41",
          Type: "开发"
        },

        {
          Sex: "男",
          Name: "王小虎",
          Age: "15",
          Card_Num: "422801199412173612",
          Phone_Num: "13080664495",
          Unit_Name: "武汉大吉大利今晚吃鸡",
          Position_ID: "卑微前端",
          Emergency_Contact_Name: "他爹爹",
          Emergency_Contact_Tel: "13080664478",
          Relationship: "父子",
          User_ID: "她麻麻",
          Create_Time: "2020-2-6 17:01:41",
          Type: "开发"
        },
        {
          Sex: "男",
          Name: "王小虎",
          Age: "15",
          Card_Num: "422801199412173612",
          Phone_Num: "13080664495",
          Unit_Name: "武汉大吉大利今晚吃鸡",
          Position_ID: "卑微前端",
          Emergency_Contact_Name: "他爹爹",
          Emergency_Contact_Tel: "13080664478",
          Relationship: "父子",
          User_ID: "她麻麻",
          Create_Time: "2020-2-6 17:01:41",
          Type: "开发"
        },
        {
          Sex: "男",
          Name: "王小虎",
          Age: "15",
          Card_Num: "422801199412173612",
          Phone_Num: "13080664495",
          Unit_Name: "武汉大吉大利今晚吃鸡",
          Position_ID: "卑微前端",
          Emergency_Contact_Name: "他爹爹",
          Emergency_Contact_Tel: "13080664478",
          Relationship: "父子",
          User_ID: "她麻麻",
          Create_Time: "2020-2-6 17:01:41",
          Type: "开发"
        },
        {
          Sex: "男",
          Name: "王小虎",
          Age: "15",
          Card_Num: "422801199412173612",
          Phone_Num: "13080664495",
          Unit_Name: "武汉大吉大利今晚吃鸡",
          Position_ID: "卑微前端",
          Emergency_Contact_Name: "他爹爹",
          Emergency_Contact_Tel: "13080664478",
          Relationship: "父子",
          User_ID: "她麻麻",
          Create_Time: "2020-2-6 17:01:41",
          Type: "开发"
        },
        {
          Sex: "男",
          Name: "王小虎",
          Age: "15",
          Card_Num: "422801199412173612",
          Phone_Num: "13080664495",
          Unit_Name: "武汉大吉大利今晚吃鸡",
          Position_ID: "卑微前端",
          Emergency_Contact_Name: "他爹爹",
          Emergency_Contact_Tel: "13080664478",
          Relationship: "父子",
          User_ID: "她麻麻",
          Create_Time: "2020-2-6 17:01:41",
          Type: "开发"
        },
        {
          Sex: "男",
          Name: "王小虎",
          Age: "15",
          Card_Num: "422801199412173612",
          Phone_Num: "13080664495",
          Unit_Name: "武汉大吉大利今晚吃鸡",
          Position_ID: "卑微前端",
          Emergency_Contact_Name: "他爹爹",
          Emergency_Contact_Tel: "13080664478",
          Relationship: "父子",
          User_ID: "她麻麻",
          Create_Time: "2020-2-6 17:01:41",
          Type: "开发"
        }
      ]
    };
  },
  methods: {
    handleSizeChange(val) {
      window.console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      window.console.log(`当前页: ${val}`);
    },
    //获取当前行信息
    rowinfo(row) {
      window.console.log(row);
      this.rowData = row;
    },

    // 打开查看弹窗
    showInfo() {
      this.showFlag = true;
    },
    //打开修改弹窗
    update() {
      this.showFlag1 = true;
    },
    //关闭弹窗
    close1() {
      this.showFlag = false;
      this.showFlag1 = false;
    }
  }
};
</script>
